<template>
	<view class="waterWave">
		<view class="text u-f-dcc">
			补液中...
		</view>
		<canvas class="waterWaveCanvasWrapper" type="2d" id="myCanvas" canvas-id="myCanvas" :style="{ width: canvasWidth + 'rpx', height: canvasHeight + 'rpx' }"></canvas>
	</view>
</template>

<script>
export default {
	props: {
		percent: {
			default: 10,
			type: Number,
		},
		canvasWidth: {
			default: 200,
			type: Number
		},
		canvasHeight: {
			default: 200,
			type: Number
		}
	},
	data() {
		return {};
	},
	async mounted() {
		const query = this.createSelectorQuery();
		const canvas = await new Promise((resolve, reject) => {
			query
				.select('#myCanvas')
				.fields({ node: true, size: true })
				.exec(res => {
					console.log(res);
					resolve(res[0].node);
				});
		});
		this.canvas = canvas;
		this.ctx = canvas.getContext('2d');
		this.renderChart();
	},
	/*
	* 注意 cancleAnimationFrame 必须在此声明周期进行调用，否则会造成内崔泄漏
	*/
	destroyed() {
		this.timer && this.canvas.cancelAnimationFrame(this.timer)
	},
	methods: {
		renderChart(type) {
			var color = '#1890FF';
			const data = this.percent / 100;
			const self = this;
			this.timer && this.canvas.cancelAnimationFrame(this.timer);

			if (!this.canvas || (data !== 0 && !data)) {
				return;
			}
			const canvas = this.canvas;
			const ctx = this.ctx;
			if (!ctx) {
				return;
			}
			const canvasWidth = (canvas.width = this.canvasWidth / 2);
			const canvasHeight = (canvas.height = this.canvasHeight / 2);
			// const canvasWidth = this.canvasWidth/2;
			// const canvasHeight = this.canvasHeight/2;
			console.log(canvasWidth, canvasHeight);
			let radius = canvasWidth / 2;
			const lineWidth = 4;
			const cR = radius - lineWidth;

			ctx.beginPath();
			ctx.lineWidth = lineWidth * 2;

			const axisLength = canvasWidth - lineWidth;
			const unit = axisLength / 8;
			const range = 0.2; // 振幅
			let currRange = range;
			const xOffset = lineWidth;
			let sp = 0; // 周期偏移量
			let currData = 0;
			const waveupsp = 0.005; // 水波上涨速度

			let arcStack = [];
			const bR = radius - lineWidth;
			const circleOffset = -(Math.PI / 2);
			let circleLock = true;

			for (let i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (6 * Math.PI)) {
				arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]);
			}

			const cStartPoint = arcStack.shift();
			ctx.strokeStyle = color;
			ctx.moveTo(cStartPoint[0], cStartPoint[1]);

			function drawSin() {
				if (!ctx) {
					return;
				}
				ctx.beginPath();
				ctx.save();

				const sinStack = [];
				for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
					const x = sp + (xOffset + i) / unit;
					const y = Math.sin(x) * currRange;
					const dx = i;
					const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y;

					ctx.lineTo(dx, dy);
					sinStack.push([dx, dy]);
				}

				const startPoint = sinStack.shift();

				ctx.lineTo(xOffset + axisLength, canvasHeight);
				ctx.lineTo(xOffset, canvasHeight);
				ctx.lineTo(startPoint[0], startPoint[1]);

				const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
				gradient.addColorStop(0, '#ffffff');
				gradient.addColorStop(1, color);
				ctx.fillStyle = gradient;
				ctx.fill();
				ctx.restore();
			}

			function render() {
				if (!ctx) {
					return;
				}
				// 清除上次画布轨迹
				ctx.clearRect(0, 0, canvasWidth, canvasHeight);
				if (circleLock && type !== 'update') {
					if (arcStack.length) {
						const temp = arcStack.shift();
						ctx.lineTo(temp[0], temp[1]);
						ctx.stroke();
					} else {
						// 画圆
						radius += 0.5
						console.log('圆的半径为', radius);
						circleLock = false;
						ctx.lineTo(cStartPoint[0], cStartPoint[1]);
						ctx.stroke();
						ctx.globalCompositeOperation = 'destination-over';
						
						ctx.beginPath();
						ctx.lineWidth = lineWidth;
						ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true);

						ctx.beginPath();
						ctx.save();
						ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, true);

						ctx.restore();
						ctx.clip();
						ctx.fillStyle = color;
						ctx.stroke();
					}
				} else {
					// 画水波
					if (data >= 0.85) {
						if (currRange > range / 4) {
							const t = range * 0.01;
							currRange -= t;
						}
					} else if (data <= 0.1) {
						if (currRange < range * 1.5) {
							const t = range * 0.01;
							currRange += t;
						}
					} else {
						if (currRange <= range) {
							const t = range * 0.01;
							currRange += t;
						}
						if (currRange >= range) {
							const t = range * 0.01;
							currRange -= t;
						}
					}
					if (data - currData > 0) {
						currData += waveupsp;
					}
					if (data - currData < 0) {
						currData -= waveupsp;
					}

					sp += 0.07;
					drawSin();
				}
				self.timer = canvas.requestAnimationFrame(render);
			}
			render();
		}
	}
};
</script>

<style lang="scss">
.waterWave {
	position: relative;
	display: inline-block;
	transform-origin: center;

	.waterWaveCanvasWrapper {
		transform: scale(0.5);
		transform-origin: center;
	}
	.text {
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: 800;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #1890ff;
		z-index: 9999;
		font-size: 36rpx;
		white-space: nowrap;

	}
}
</style>
